<template>
	<view>
		<view class="page-bottom-fixed padding-main">
			<!-- 固定搜索栏 -->
			<view class="search-bar-wrapper">
				<!-- 搜索 -->
				<view class="search wh-auto">
					<view class="search-content oh bg-gray flex-row">
						<uni-icons class="spi" type="search" size="16" color="#b7b7b7"></uni-icons>
						<input type="text" confirm-type="search" placeholder="搜索内容" class="wh-auto cr-888" @confirm="search_input_event" />
					</view>
				</view>
			</view>
			
			<!-- 商品数量提示 -->
			<view class="product-tips">
				<uni-icons type="info" size="16" color="#409EFF" />
				<text>还可添加{{still_can_add}}个商品（当前已添加{{aready_add}}个）</text>
			</view>
			
			<!-- 商品列表 -->
			<scroll-view :scroll-y="true" class="scroll-box scroll-box-ece-nav" @scrolltolower="scroll_lower" lower-threshold="60">
			    <view v-if="data_list.length > 0" class="padding-horizontal-main padding-top-main oh product-list">
			        <view v-for="(item, index) in data_list" :key="index" class="product-card">
						<!-- 左侧图片容器 -->
						<view class="thumb-container">
						  <image 
							:src="item.images" 
							class="product-thumb"
							mode="aspectFill" 
						  />
						</view>
			        			
						<!-- 右侧信息容器 -->
						<view class="info-container">
							<view class="info-header">
								<text v-if="item.is_shelves == 1" class="product-name" :data-value="'/pages/goods-detail/goods-detail?id='+item.id" @tap="url_event">{{ item.title }}</text>
								<text v-else class="product-name2">{{ item.title }}</text>
								<text v-if="item.is_shelves == 1" class="t1">{{$t('fengcheche.classinfo.product.yishangjia')}}</text>
								<text v-else class="t2">{{$t('fengcheche.classinfo.product.weishangjia')}}</text>
							</view>

							<view class="meta-line">
								<text class="price"></text>
								<text class="stock">{{$t('goods-detail.goods-detail.1s79t4')}} {{ item.inventory }}</text>
							</view>

							<view class="action-buttons">
								<view class="dis-inline" :data-value="'/pages/fcc/classinfo/product-saveinfo/product-saveinfo?id=' + item.id" @tap="url_event">
									<uni-icons type="compose" size="20" color="#409EFF" />
								</view>
								<view class="dis-inline" :data-value="item.id" :data-index="index" @tap="del_event">
									<uni-icons type="trash" size="20" color="#F56C6C" class="action-icon"/>
								</view>
							</view>
						</view>
			        </view>
			    </view>
			    <view v-else>
			        <!-- 提示信息 -->
			        <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
			    </view>
			
			    <!-- 结尾 -->
			    <component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
			</scroll-view>
		</view>
		
		<!-- 底部悬浮操作栏 -->
		<view v-if="still_can_add > 0" class="bottom-action-bar" data-value="/pages/fcc/classinfo/product-saveinfo/product-saveinfo" @tap="url_event">
			<uni-icons type="plus" size="20" color="#fff" />
			<text class="btn-text">新增商品</text>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import componentNoData from '@/components/no-data/no-data';
	import componentBottomLine from '@/components/bottom-line/bottom-line';
	import {system_base_info} from "@/common/js/common/common";
	export default {
		data() {
			return {
				diytheme: app.globalData.get_fcc_theme_color() || null,
				data_list: [],
				data_total: 0,
				data_page_total: 0,
				data_page: 1,
				data_list_loding_status: 1,
				data_bottom_line_status: false,
				data_is_loading: 0,
				data_list_loding_msg: '',
				wd: '',
				aready_add: 0,
				still_can_add: 0,
			}
		},
		components: {
			componentNoData,
			componentBottomLine
		},
		onLoad(params) {
		    // 调用公共事件方法
		    app.globalData.page_event_onload_handle(params);
		},
		
		onShow() {
		    // 调用公共事件方法
		    app.globalData.page_event_onshow_handle();
		
		    // 数据加载
		    this.init();
		},
		
		// 下拉刷新
		onPullDownRefresh() {
		    this.setData({
		        data_page: 1
		    });
		    this.get_data_list(1);
		},
		
		methods: {
			// 获取数据
			init() {
			    var user = app.globalData.get_user_info(this, "init");
			    if (user != false) {
			        this.setData({
			            data_page: 1
			        });
			        this.get_data_list(1);
			    } else {
			        this.setData({
			            data_list_loding_status: 0,
			            data_bottom_line_status: false
			        });
			    }
			},
			// 获取数据
			get_data_list(is_mandatory) {
			    // 分页是否还有数据
			    if ((is_mandatory || 0) == 0) {
			        if (this.data_bottom_line_status == true) {
			            uni.stopPullDownRefresh();
			            return false;
			        }
			    }
			    
			    // 是否加载中
			    if(this.data_is_loading == 1) {
			        return false;
			    }
			    this.setData({
			        data_is_loading: 1,
			        data_list_loding_status: 1
			    });
			    
			    // 加载loding
			    if(this.data_page > 1) {
			        uni.showLoading({
			            title: this.$t('common.loading_in_text'),
			        });
			    }
			    
			    // 获取数据
			    uni.request({
			        url: app.globalData.get_request_url("productlist", "shop", "classinfo"),
			        method: 'POST',
			        data: {
			            page: this.data_page,
						wd: this.wd || ''
			        },
			        dataType: 'json',
			        success: res => {console.log(res);
			            if (this.data_page > 1) {
			                uni.hideLoading();
			            }
			            uni.stopPullDownRefresh();
			            if (res.data.code == 0) {
			                // 数据列表
			                var data = res.data.data;
			                if (this.data_page <= 1) {
			                    var temp_data_list = data.data || [];
			                } else {
			                    var temp_data_list = this.data_list || [];
			                    var temp_data = data.data;
			                    for (var i in temp_data) {
			                        temp_data_list.push(temp_data[i]);
			                    }
			                }
			            
			                this.setData({
			                    data_list: temp_data_list,
			                    data_total: data.total,
			                    data_page_total: data.page_total,
			                    data_list_loding_status: temp_data_list.length > 0 ? 3 : 0,
			                    data_list_loding_msg: '',
			                    data_page: this.data_page + 1,
			                    data_is_loading: 0,
								still_can_add: data.still_can_add || 0,
								aready_add: data.aready_add || 0,
			                });
			            
			                // 是否还有数据
			                this.setData({
			                    data_bottom_line_status: this.data_page > 1 && this.data_page > this.data_page_total,
			                });
			            } else {
			                this.setData({
			                    data_list_loding_status: 2,
			                    data_list_loding_msg: res.data.msg,
			                });
			                app.globalData.is_login_check(res.data, this, 'get_data_list');
			            }
			        },
			        fail: () => {
			            if(this.data_page > 1) {
			                uni.hideLoading();
			            }
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2,
			                data_is_loading: 0,
			                data_list_loding_msg: this.$t('common.internet_error_tips'),
			            });
			        }
			    });
			},
			
			// 滚动加载
			scroll_lower(e) {
			    this.get_data_list();
			},
			
			// 删除
			del_event(e) {console.log(e);
			    uni.showModal({
			        title: this.$t('common.warm_tips'),
			        content: this.$t('order.order.psi67g'),
			        confirmText: this.$t('common.confirm'),
			        cancelText: this.$t('recommend-list.recommend-list.w9460o'),
			        success: result => {
			            if (result.confirm) {
			                // 参数
			                var id = e.currentTarget.dataset.value;
			                var index = e.currentTarget.dataset.index;
			                
			                // 加载loding
			                uni.showLoading({
			                    title: this.$t('common.processing_in_text')
			                });
			                uni.request({
			                    url: app.globalData.get_request_url("productdelete", "shop", "classinfo"),
			                    method: 'POST',
			                    data: {
			                        id: id
			                    },
			                    dataType: 'json',
			                    success: res => {
			                        uni.hideLoading();
			
			                        if (res.data.code == 0) {
			                            var temp_data_list = this.data_list;
			                            temp_data_list.splice(index, 1);
			                            this.setData({
			                                data_list: temp_data_list,
											still_can_add: parseInt(this.still_can_add)+1,
											aready_add: parseInt(this.aready_add)-1,
			                            });
			                            if (temp_data_list.length == 0) {
			                                this.setData({
			                                    data_list_loding_status: 0,
			                                    data_bottom_line_status: false
			                                });
			                            }
			                            app.globalData.showToast(res.data.msg, 'success');
			                        } else {
			                            if (app.globalData.is_login_check(res.data)) {
			                                app.globalData.showToast(res.data.msg);
			                            } else {
			                                app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
			                            }
			                        }
			                    },
			                    fail: () => {
			                        uni.hideLoading();
			                        app.globalData.showToast(this.$t('common.internet_error_tips'));
			                    }
			                });
			            }
			        }
			    });
			},
			
			// url事件
			url_event(e) {
			    app.globalData.url_event(e);
			},
			
			// 搜索事件
			search_input_event(e) {
			    var keywords = e.detail.value || null;
			    
			    // 是否验证必须要传值
			    if (keywords == null) {
			        app.globalData.showToast(this.$t('search.search.ic9b89'));
			        return false;
			    }
			    
			    // 进入搜索页面
				this.setData({
				    wd: keywords,
				    data_page: 1
				});
				this.get_data_list(1);
			},
		}
	}
</script>
<style>
    @import './company-product.css';
</style>
<style lang="scss">
/* 固定搜索栏 */
.search-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 20rpx;
  /*background: #007aff;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);*/
}

/* 新增提示样式 */
.product-tips {
  background: #f0f7ff;
  padding: 20rpx 24rpx;
  margin-top: 80rpx; /* 搜索栏高度 */
  margin-bottom: 20rpx; 
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #409EFF;
  border-bottom: 1rpx solid #e5f1ff;

  text {
    margin-left: 10rpx;
  }
}

.product-list {
  padding: 0rpx 0rpx 100rpx;
}

.product-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  padding: 20rpx;
  box-sizing: border-box;
  width: 100%;

  /* 左侧图片容器 */
  .thumb-container {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;
    
    .product-thumb {
      width: 100%;
      height: 100%;
    }
  }

  /* 右侧信息容器 */
  .info-container {
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12rpx;
      
      .product-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #409EFF;
        flex: 1;
        margin-right: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
	  
	  .product-name2 {
	    font-size: 28rpx;
	    font-weight: 500;
	    color: #333;
	    flex: 1;
	    margin-right: 20rpx;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	  }

	  .t1{color:#67C23A;}
	  .t2{color:#F56C6C;}
    }

    .meta-line {
      margin-bottom: 16rpx;
      
      .price {
        color: #F56C6C;
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }
      
      .stock {
        color: #909399;
        font-size: 24rpx;
      }
    }

    .action-buttons {
      display: flex;
      gap: 25rpx;
      justify-content: flex-end;
      padding-top: 12rpx;
      border-top: 1rpx solid #eee;
    }
  }
}
/* 底部悬浮按钮样式 */
.bottom-action-bar {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600rpx;
  height: 80rpx;
  background: #409EFF;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 8rpx 24rpx rgba(64,158,255,0.3);
  z-index: 10;
  transition: all 0.3s ease;

  .btn-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }

  /* 禁用状态 */
  &.disabled {
    background: #c0c4cc !important;
    box-shadow: 0 8rpx 24rpx rgba(192,196,204,0.3);
    opacity: 0.9;
    
    .btn-text {
      color: #fff;
    }
  }
}
</style>